
<template>
<div id="viewuser">   
           <el-button-group style="margin-bottom:20px;">
            <el-button @click="addUI" type="success" icon="el-icon-edit">添加</el-button>
            </el-button-group>
         
<el-button-group   style="margin-bottom:20px;">
    <el-input placeholder="请输入内容" v-model="name" class="input-with-select" @change="shearch">
   </el-input>
  </el-button-group>  

<el-button-group   style="margin-bottom:20px;">
<el-select v-model="loststatus" @change="state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

</el-button-group>



      <el-table
   :data="pagination.records"

    :cell-style="rowstyle"
      :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    style="width:1500px;">
    <el-table-column
     v-for="clounm in clounms" :key="clounm.prop"
        :prop="clounm.prop"
        :label="clounm.label"
        :width="clounm.width">
    </el-table-column>

    
       
  
    <el-table-column
     
      label="操作"
      width="210"
      align="center">
      <template slot-scope="scope">
           <el-button type="primary"   @click="handleselect(scope.row)">查看</el-button>
        <el-button type="primary"  @click="handleupdate(scope.row)">编辑</el-button>
      </template> 
    </el-table-column>
  </el-table>

  <el-pagination
      style="margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[1,2,6,8]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>


  <!--添加失物招领-->

  <el-dialog title="添加失物招领信息" :visible.sync="addlost">
  <el-form :model="lost">
    <el-row>
  <el-col :span="10"  >
     <el-form-item label="遗失人姓名:" :label-width="formLabelWidth">
      <el-input v-model="lost.lostpeople " autocomplete="off"></el-input>
    </el-form-item>
   </el-col>
  <el-col :span="10" >
     <el-form-item label="遗失人电话:" :label-width="formLabelWidth">
      <el-input v-model="lost.lostphone " autocomplete="off"></el-input>
    </el-form-item>

    </el-col>
</el-row>
   

  

      
     <el-form-item label="遗失物品名称:" :label-width="formLabelWidth">
      <el-input v-model="lost.lostname " autocomplete="off"></el-input>
    </el-form-item>

   

    

 
     <el-form-item label="遗失的地点:" :label-width="formLabelWidth">
      <el-input v-model="lost.lostplace " autocomplete="off"></el-input>
    </el-form-item>
  


  <el-form-item label="遗失时间:" :label-width="formLabelWidth">
        <el-date-picker type="date" placeholder="选择日期" v-model="lost.lostdate" style="width: 100%;"></el-date-picker>
    </el-form-item>
 

   <el-form-item label="失物状态:">
    <el-radio-group v-model="lost.loststatus" >
      <el-select v-model="lost.loststatus" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      
    </el-option>
  </el-select>
    </el-radio-group>
  </el-form-item>

      <el-form-item label="处理人联系电话" :label-width="formLabelWidth">
      <el-input v-model="lost.lostprocessorphone " autocomplete="off"></el-input>
    </el-form-item>

    
     

 

    


  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addlost = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </div>
</el-dialog>


<!--修改-->

  <el-dialog title="修改失物招领信息" :visible.sync="updatelost">
  <el-form :model="uplost">
    <el-row>
  <el-col :span="10"  >
     <el-form-item label="遗失人姓名:" :label-width="formLabelWidth">  
       <el-input v-model="uplost.lostpeople " autocomplete="off"></el-input>
    </el-form-item>
   </el-col>
  <el-col :span="10" >
     <el-form-item label="遗失人电话:" :label-width="formLabelWidth">
      <el-input v-model="uplost.lostphone " autocomplete="off"></el-input>
    </el-form-item>

    </el-col>
</el-row>
   

  

      
     <el-form-item label="遗失物品名称:" :label-width="formLabelWidth">
      <el-input v-model="uplost.lostname " autocomplete="off"></el-input>
    </el-form-item>

   

    

 
     <el-form-item label="遗失的地点:" :label-width="formLabelWidth">
      <el-input v-model="uplost.lostplace " autocomplete="off"></el-input>
    </el-form-item>
  


  <el-form-item label="遗失时间:" :label-width="formLabelWidth">
        <el-date-picker type="date" placeholder="选择日期" v-model="uplost.lostdate" style="width: 100%;"></el-date-picker>
    </el-form-item>
 

   <el-form-item label="失物状态:">
    <el-radio-group v-model="uplost.loststatus" >
      <el-select v-model="uplost.loststatus" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      
    </el-option>
  </el-select>
    </el-radio-group>
  </el-form-item>


      <el-form-item label="处理人联系电话" :label-width="formLabelWidth">
      <el-input v-model="uplost.lostprocessorphone " autocomplete="off"></el-input>
    </el-form-item>

  

 

  

  <el-form-item label="领取人" :label-width="formLabelWidth" v-if="uplost.loststatus==='已领取'" >
      <el-input v-model="uplost.receiptor " autocomplete="off"></el-input>
    </el-form-item>


  <el-form-item label="领取人电话" :label-width="formLabelWidth" v-if="uplost.loststatus==='已领取'" >
      <el-input v-model="uplost.receiptorphone " autocomplete="off"></el-input>
    </el-form-item>


  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel()">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </div>
</el-dialog>





<!--查看-->

  <el-dialog title="查询失物招领信息" :visible.sync="selectlost">
  <el-form :model="lost">
    <el-row>
  <el-col :span="10"  >
     <el-form-item label="遗失人姓名:" :label-width="formLabelWidth">  
   
       <span>{{lost.lostpeople}}</span>
    </el-form-item>
   </el-col>
  <el-col :span="10" >
     <el-form-item label="遗失人电话:" :label-width="formLabelWidth">
      
        <span>{{lost.lostphone}}</span>
    </el-form-item>

    </el-col>
</el-row>
   
<el-row>
 <el-col :span="10"  >
      
     <el-form-item label="遗失物品名称:" :label-width="formLabelWidth">
     
       <span>{{lost.lostname}}</span>
    </el-form-item>

      </el-col>

    
 <el-col :span="10"  >
     <el-form-item label="遗失的地点:" :label-width="formLabelWidth">
      
      <span>{{lost.lostplace}}</span>
    </el-form-item>
   </el-col>
</el-row>


<el-row>
   <el-col :span="10"  >
  <el-form-item label="遗失时间:" :label-width="formLabelWidth">
      
          <span>{{lost.lostdate}}</span>
    </el-form-item>
  </el-col>

<el-col :span="10"  >
   <el-form-item label="失物状态:">
         <span>{{lost.loststatus}}</span>
  </el-form-item>
</el-col>
</el-row>


<el-row>
  <el-col :span="10"  >
      <el-form-item label="处理人联系电话" :label-width="formLabelWidth">
      <span>{{lost.lostprocessorphone}}</span>
    </el-form-item>
   </el-col>
<el-col :span="10"  >
     <el-form-item label="领取人" :label-width="formLabelWidth"  >   
      <span>{{lost.receiptor}}</span>
    </el-form-item>
 </el-col>
</el-row>


<el-row>
    <el-col :span="10"  >
      <el-form-item label="领取人电话" :label-width="formLabelWidth" >
         <span>{{lost.receiptorphone}}</span>
    </el-form-item>
    </el-col>
  <el-col :span="10"  >
   <el-form-item label="发布者" :label-width="formLabelWidth" >
         <span>{{lost.lostpublisher}}</span>
    </el-form-item>
  </el-col>
</el-row>

<el-row>
    <el-col :span="10"  >
     <el-form-item label="发布时间" :label-width="formLabelWidth" >
         <span>{{lost.lostpublishtime}}</span>
    </el-form-item>
</el-col>
  <el-col :span="10"  >
    <el-form-item label="修改者姓名" :label-width="formLabelWidth" >
         <span>{{lost.lostupdatepeople}}</span>
    </el-form-item>
</el-col>
</el-row>


     <el-form-item label="修改时间" :label-width="formLabelWidth" >
         <span>{{lost.lostupdatetime}}</span>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel2()">取 消</el-button>
    
  </div>
</el-dialog>





</div>
</template>
<script>
  export default {
    data() {
      return {

   

       clounms:[
           {prop:'lostpeople',label:'遗失人姓名',width:'100'},
           {prop:'lostphone',label:'遗失人电话',width:'150'},
           {prop:'lostname',label:'遗失物品名称',width:'150'},
           {prop:'lostplace',label:'遗失地点',width:'150'},
           {prop:'lostdate',label:'遗失时间',width:'150'},
           {prop:'loststatus',label:'失物状态',width:'150'},
           {prop:'lostprocessorphone',label:'处理人电话',width:'150'},
           {prop:'receiptor',label:'领取人',width:'150'},
           {prop:'receiptorphone',label:'领取人电话',width:'140'},
        ],
        
          addlost:false,
          //状态下拉框
          options:[
           {
             value:'未找到',
            label:'未找到'
           },
           {
             value:'未领取',
            label:'未领取'
           },
           {
             value:'已领取',
            label:'已领取'
           },
          ],



            
        
          realname:this.$store.state.userList1[0].realName,
          loststatus:'',
           value: '',
          pagination:{},
        
          lost:{ lostpublisher: this.$store.state.userList1[0].realName,},
          updatelost:false,
        
          uplost:{lostupdatepeople:''},
            selectlost:false,

          name:'',
          formLabelWidth: '120px',
          
      };
  
    },
    methods: {
      rowstyle(){
       return "text-align: center" ;
       }
    
  ,
      handleClick(row) {
        console.log(row);
      },
      addUI(){
      this.addlost=true;
      
      },
      //查询方法
      find(page=1,size=3){
       var url="lost/selectLost";
       var params=new URLSearchParams();
         params.append("current",page);
            params.append("size",size);
           params.append("lostname",this.name); 
           params.append("loststatus",this.loststatus);
             
          this.$axios.post(url,params).then(resp=>{
              console.log(resp);
              console.log(this.name)
               this.pagination=resp.data;
                  console.log(this.pagination.records);
          })
      },


    //添加方法
     add(){
         var  url="/lost/saveLost";
            this.$axios.post(url,this.lost).then(resp=>{
              
             this.lost={};
            this. addlost=false;
            this.find();
               this.$message({
                   message:"添加成功",
                   type:'success'
               })
          })
     },

     update(){
        var  url="/lost/updateLost";
            this.$axios.post(url,this.lost).then(resp=>{
          this.lost={};
             this. updatelost=false;
             this.find();
               this.$message({
                   message:"修改成功",
                   type:'success'
               })
          })
     },

     state(value){
      this.loststatus=value;
      this.find();
      
     },
     
   shearch(value){
    this.name=value;
    this.find();
   },


//修改方法里面的取消方法
     cancel(){
      this.updatelost = false;
      this.find();
     
       

     },
    //查询方法里面的取消方法
     cancel2(){
         this.selectlost = false;
     
     },
   //修改方法
     handleupdate(row){
      this.updatelost=true;
      console.log(row);
      this.uplost=row;
      this.uplost.lostupdatepeople = this.realname;
     },
  //查看方法
   handleselect(row){
    this.lost=row;
    this.selectlost=true;
    console.log(row)
   },




       //pageSize 改变时会触发回调参数每页条数
      handleSizeChange(size){
          this.find(this.pagination.current,size)

      },
      //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(page){
        this.find(page,this.pagination.size)
      },
    },
    mounted() {
        this.find();
    },

  };
</script>

<style scoped>
  #viewuser{
     margin-left: 50px;
    margin-top: 50px;
  }

    .el-row {
    margin-bottom: 20px;
  
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>

